import { useEffect, useState, useRef, useCallback } from 'react';
import { Skeleton, Space, Button } from 'antd';
import { CustomerServiceOutlined, MailOutlined, QuestionOutlined, UserOutlined } from '@ant-design/icons';
import loadable from '@loadable/component';
import { useHistory } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import pMinDelay from 'p-min-delay';

import { HOME } from '@/config/url';
import { setStore } from '@/reducers/common';
import useDevice, { DEVICES } from '@/hooks/useDevice';
import styles from './index.module.scss';

const IconFont = loadable(() => import('@/components/IconFont'));
const AvatarPopover = loadable(() => pMinDelay(import('./../AvatarPopover'), 0), {fallback: <Skeleton.Avatar active/>});
const MsgPopover = loadable(() => pMinDelay(import('./../MsgPopover'), 0), {fallback: <Skeleton.Avatar active/>});

export default props => {
    const initState = () => ({
        pathname: '',
    });
    const [state, setState] = useState(initState);
    const history = useHistory();
    const { userInfo={} } = useSelector(s => s.common);
    const isPc = DEVICES.DESKTOP === useDevice();
    const dispatch = useDispatch();
    const hasLogin = !!userInfo?.id;
    const CONFIG = [
        {value: 1, label: '课程', iconName: 'icon-navtiaoseban'},
        {value: 2, label: '大健康', iconName: 'icon-navduihua'},
        {value: 3, label: '活动营', iconName: 'icon-leida'},
    ];

    const toPage = item => {
        history.push(item.value);
    };

    const initLayout = (pathname='') => {
        setState(o => ({...o, pathname}));
    };
    useEffect(() => {
        initLayout(location.pathname);

        const unListen = history.listen(({pathname}) => initLayout(pathname));

        return () => {
            unListen();
        }
    }, []);

    return (
        <header className={styles['header']}>
            <div className={styles['logo']}>
                <a href={HOME}>
                    <img src="/images/logo.png" alt={WEB_NAME} />
                </a>
            </div>
            {
                isPc ?
                    <div className={styles['menus']}>
                        {
                            CONFIG.map(item => {
                                return (
                                    <div
                                        key={item.value}
                                        className={`${styles['menu-item']} ${state.pathname === item.value ? styles['focus'] : ''}`}
                                        onClick={toPage.bind(null, item)}
                                    >
                                        {item.label}
                                    </div>
                                );
                            })
                        }
                    </div>
                    :
                    null
            }
            <div className={styles['search']}>
                search
            </div>
            <div className={styles['actions']}>
                <Space className={styles['actions-space']}>
                    { hasLogin ? <MsgPopover /> : null }
                    <AvatarPopover />
                </Space>
            </div>
        </header>
    )
}
